<template>
	<view class="main animated fadeIn faster">
		<view class="content position-fixed z-index-100" :style="{'paddingTop':$store.state.statusBarHeight+'px'}">
			<view class="title">
				<view class="goback" @click="goback">
					<image src="../../static/组 2457.png"></image>
				</view>
				<text>关注</text>
			</view>
		</view>
		<view class="JoinInList">
			<view class="item">
				<view class="info">
					<view class="icon">
						<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%203402.png"></image>
						<view class="sex">
							<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%203404.png"></image>
						</view>
					</view>
					<view class="detailed">
						<view class="name">1818 · 意</view>
						<view class="desc">武汉 · 24岁 · 年薪10-20W</view>
					</view>
				</view>
				<view class="btn" v-if="0">已关注</view>
				<view class="btn" v-else>
					<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%205034.png"></image>
				</view>
			</view>
			<view class="item" v-for="i in 8" :key="i.id">
				<view class="info">
					<view class="icon">
						<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%203402.png"></image>
						<view class="sex">
							<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%203404.png"></image>
						</view>
					</view>
					<view class="detailed">
						<view class="name">1818 · 意</view>
						<view class="desc">武汉 · 24岁 · 年薪10-20W</view>
					</view>
				</view>
				<view class="btn" v-if="1">已关注</view>
				<view class="btn" v-else>
					<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%205034.png"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import store from '@/store/index.js';
	export default {
		data() {
			return {
			}
		},
		methods: {
			goback() {
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
</script>

<style scoped lang="scss">
.main {
	background: #fff;
	overflow: hidden;
	.content {
		width: 100%;
		background-color: #fff !important;
	}
	.JoinInList {
		width: 730rpx;
		margin: 200rpx auto 0;
		border-radius: 50rpx;
		background-color: #fff;
		overflow: hidden;
		padding-bottom: 10rpx;
		.item {
			width: 700rpx;
			height: 150rpx;
			margin: 30rpx auto;
			background-color: #f5f5f5;
			border-radius: 15rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.info {
				display: flex;
				margin-left: 20rpx;
				.icon {
					position: relative;
					image {
						width: 152rpx;
						height: 152rpx;
					}
					.sex {
						position: absolute;
						bottom: 20rpx;
						right: 20rpx;
						image {
							width: 30rpx;
							height: 30rpx;
						}
					}
				}
				.detailed {
					display: flex;
					flex-direction: column;
					justify-content: center;
					.name {
						margin: 10rpx 0 4rpx;
						color: #231815;
						font-weight: 700;
						font-size: 32rpx;
					}
					.desc {
						color: #595757;
						font-size: 22rpx;
					}
				}
			}
			.btn {
				width: 150rpx;
				height: 60rpx;
				border-radius: 30rpx;
				color: #fff;
				margin-right: 50rpx;
				background: linear-gradient( 90deg, #ED65CE 0%, #E966CF 2%, #859BF0 69%, #5DB0FE 99%);
				display: flex;
				justify-content: center;
				align-items: center;
				image {
					width: 21.23rpx;
					height: 20.16rpx;
				}
			}
		}
	}
}
.title {
	display: flex;
	align-items: center;
	font-weight: 700;
	height: 80rpx;
	.goback {
		image {
			margin-left: 50rpx;
			width: 20rpx;
			height: 30rpx;
		}
	}
	text {
		flex: 1;
		margin-right: 50rpx;
		font-size: 34rpx;
		text-align: center;
	}
}
.pt-300 {
	padding-top: 300rpx;
}
</style>
